<template>
  <div class="box">
    <!-- 主播等级 -->
    <section class="width-100">
      <div class="flex items-center just-center">
        <span>主播等级</span>
        <el-button type="text ml-10" @click="handleEdit(allData.anchor_level)">编辑</el-button>
      </div>
      <p class="color-red">生效时间：{{ allData.anchor_level[0].effect_time }}</p>
      <div v-for="item in allData.anchor_level" :key="item.id" class="flex items-center just-center pl-20 mb-20">
        <div class="w-120">{{ item.level_name }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">分数达到：</span>
          <el-input v-model="item.score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">每周推荐人数：</div>
        <el-input v-model="item.target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">人</template>
        </el-input>
      </div>
    </section>

    <!-- 总流水 -->
    <section class="width-100">
      <div class="flex items-center just-center">
        <span>总流水</span>
        <i class="el-icon-circle-plus-outline ml-10" @click="handleAdd(allData.total_flow, 'total_flow', '新增总流水',)"></i>
        <el-button type="text ml-10" @click="handleEdit1(allData.total_flow, '编辑总流水', 'total_flow')">编辑</el-button>
      </div>
      <p class="color-red">生效时间：{{ allData.total_flow[0].effect_time }}</p>
      <div v-for="(item, index) in allData.total_flow" :key="item.id"
           class="flex items-center just-center pl-20 mb-20 bg"
      >
        <div class="w-120">序列{{ item.sort }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">获得分数：</span>
          <el-input v-model="item.score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">总流水达到：</div>
        <el-input v-model="item.target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">M豆</template>
        </el-input>
        <el-button class="red ml-10" size="default" type="text" @click="handleDelete(item, index)">删除</el-button>
      </div>
    </section>

    <!-- 每周转化率 -->
    <section class="width-100">
      <div class="flex items-center just-center">
        <span>每周转化率</span>
        <i class="el-icon-circle-plus-outline ml-10"
           @click="handleAdd(allData.conversion_rate, 'conversion_rate', '新增每周转化率')"
        ></i>
        <el-button type="text ml-10" @click="handleEdit1(allData.conversion_rate, '编辑每周转化率','conversion_rate')">编辑
        </el-button>
      </div>
      <p class="color-red">生效时间：{{ allData.conversion_rate[0].effect_time }}</p>
      <div v-for="(item, index) in allData.conversion_rate" :key="item.id"
           class="flex items-center just-center pl-20 mb-20 bg"
      >
        <div class="w-120">序列{{ item.sort }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">获得分数：</span>
          <el-input v-model="item.score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">转化占比：</div>
        <el-input v-model="item.target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">%</template>
        </el-input>
        <el-button class="red ml-10" size="default" type="text" @click="handleDelete(item, index)">删除</el-button>
      </div>
    </section>

    <!-- 主动私聊新用户 -->
    <section class="width-100">
      <div class="flex items-center just-center">
        <span>主动私聊新用户</span>
        <i class="el-icon-circle-plus-outline ml-10"
           @click="handleAdd(allData.chat_new_people, 'chat_new_people', '新增主动私聊新用户')"
        ></i>
        <el-button type="text ml-10" @click="handleEdit1(allData.chat_new_people, '编辑主动私聊新用户','chat_new_people')">编辑
        </el-button>
      </div>
      <p class="color-red">生效时间：{{ allData.chat_new_people[0].effect_time }}</p>
      <div v-if="!allData.chat_new_people.length" class="h-100 bg-00000020">暂无数据，请新增</div>
      <div v-for="(item, index) in allData.chat_new_people" :key="item.id"
           class="flex items-center just-center pl-20 mb-20 bg"
      >
        <div class="w-120">序列{{ item.sort }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">获得分数：</span>
          <el-input v-model="item.score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">主动私聊人数：</div>
        <el-input v-model="item.target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">人</template>
        </el-input>
        <el-button class="red ml-10" size="default" type="text" @click="handleDelete(item, index)">删除</el-button>
      </div>
    </section>

    <!-- 操作任务 -->
    <section class="width-100">
      <div class="flex items-center just-center">
        <span>操作任务</span>
        <el-button type="text ml-10" @click="handleEdit2(allData.operational_task)">编辑</el-button>
      </div>
      <p class="color-red">生效时间：{{ allData.operational_task[0].effect_time }}</p>
      <div class="flex items-center just-center pl-20 mb-20">
        <div class="w-120">序列{{ allData.operational_task[0].sort }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">获得分数：</span>
          <el-input v-model="allData.operational_task[0].score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">每周新增动态条数：</div>
        <el-input v-model="allData.operational_task[0].target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">条</template>
        </el-input>
        <!-- <el-button type="text" class="red ml-10" size="default" @click="handleDelete(allData.operational_task[0], index)">删除</el-button> -->
      </div>
      <div v-if="allData.operational_task[1]" class="flex items-center just-center pl-20 mb-20">
        <div class="w-120">序列{{ allData.operational_task[1].sort }}</div>
        <div class="flex items-center just-center">
          <span class="w-120">获得分数：</span>
          <el-input v-model="allData.operational_task[1].score" disabled></el-input>
        </div>
        <div class="w-120 ml-15">每周在线时长：</div>
        <el-input v-model="allData.operational_task[1].target_val" class="w-250" disabled placeholder="请输入内容">
          <template slot="append">小时</template>
        </el-input>
        <!-- <el-button type="text" class="red ml-10" size="default" @click="handleDelete(allData.operational_task[1], index)">删除</el-button> -->
      </div>
    </section>


    <!-- 编辑主播等级 -->
    <el-dialog
      :visible.sync="anchorLevelVisible"
      title="编辑主播等级"
      width="30%"
      @close="closeDialog"
    >
      <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="130px" size="normal">

        <div v-for="(item,index) in formData.anchor_level" :key="item.id"
             class="flex items-start pl-20 mb-20 flex-column line"
        >
          <el-form-item :prop="`anchor_level.${index}.level_name`"
                        :rules="{required: true, message: `请输入主播等级`, trigger: ['blur']}"
                        label="主播等级："
          >
            <el-input v-model="item.level_name" class="w-250" disabled></el-input>
          </el-form-item>
          <el-form-item :prop="`anchor_level.${index}.score`"
                        :rules="{required: true, message: `请输入分数`, trigger: ['blur']}"
                        label="分数达到："
          >
            <el-input v-model="item.score" class="w-250"></el-input>
          </el-form-item>
          <el-form-item :prop="`anchor_level.${index}.target_val`"
                        :rules="{required: true, message: `请输入每周推荐人数`, trigger: ['blur']}"
                        label="每周推荐人数："
          >
            <el-input v-model="item.target_val" class="w-250" placeholder="请输入内容">
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer">
            <el-button @click="anchorLevelVisible = false">取消</el-button>
            <el-button type="primary" @click="submitEdit(formData.anchor_level)">确定</el-button>
        </span>
    </el-dialog>

    <!-- 新增/编辑：总流水任务，主动私聊新用户，每周转化率 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form ref="form" :inline="false" :model="formData2" :rules="rules2" label-width="130px" size="normal">
        <div v-if="(showdialog === 1)">
          <div v-for="(item, index) in formData2.data" :key="index" class="mb-20 line">
            <el-form-item :prop="`data.${index}.sort`" :rules="{required: true, message: `请输入序号`, trigger: ['blur']}"
                          label="序号："
            >
              <el-input v-model="item.sort" :disabled="!isAdd" @blur="handleBlur(item.sort,1)"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.score`" :rules="{required: true, message: `请输入获得分数`, trigger: ['blur']}"
                          label="获得分数："
            >
              <el-input v-model="item.score" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.target_val`"
                          :rules="{required: true, message: `请输入总流水`, trigger: ['blur']}"
                          label="总流水："
            >
              <el-input v-model="item.target_val " placeholder="请输入内容">
                <template slot="append">M豆</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div v-if="(showdialog === 2)">
          <div v-for="(item, index) in formData2.data" :key="index" class="mb-20 line">
            <el-form-item :prop="`data.${index}.sort`" :rules="{required: true, message: `请输入序号`, trigger: ['blur']}"
                          label="序号："
            >
              <el-input v-model="item.sort" :disabled="!isAdd" @blur="handleBlur(item.sort,2)"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.score`" :rules="{required: true, message: `请输入获得分数`, trigger: ['blur']}"
                          label="获得分数："
            >
              <el-input v-model="item.score" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.target_val`"
                          :rules="{required: true, message: `请输入转化占比`, trigger: ['blur']}"
                          label="转化占比："
            >
              <el-input v-model="item.target_val" placeholder="请输入内容">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div v-if="(showdialog === 3)">
          <div v-for="(item, index) in formData2.data" :key="index" class="mb-20 line">
            <el-form-item :prop="`data.${index}.sort`" :rules="{required: true, message: `请输入序号`, trigger: ['blur']}"
                          label="序号："
            >
              <el-input v-model="item.sort" :disabled="!isAdd" @blur="handleBlur(item.sort,3)"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.score`" :rules="{required: true, message: `请输入获得分数`, trigger: ['blur']}"
                          label="获得分数："
            >
              <el-input v-model="item.score" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item :prop="`data.${index}.target_val`"
                          :rules="{required: true, message: `请输入主动私聊人数`, trigger: ['blur']}"
                          label="主动私聊人数："
            >
              <el-input v-model="item.target_val" placeholder="请输入内容">
                <template slot="append">人</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitEdit(formData2.data)">确定</el-button>
        </span>
    </el-dialog>

    <!-- 编辑操作任务 -->
    <el-dialog
      :visible.sync="dialogVisible2"
      title="编辑操作任务"
      width="30%"
      @close="closeDialog"
    >
      <el-form ref="form" :inline="false" :model="formData3" :rules="rules" label-width="150px" size="normal">

        <div v-for="(item, index) in formData3.data" :key="item.id" class="mb-20 line">
          <el-form-item :prop="`data.${index}.sort`" :rules="{required: true, message: `请输入序列`, trigger: ['blur']}"
                        label="序列："
          >
            <el-input v-model="item.sort" disabled></el-input>
          </el-form-item>
          <el-form-item :prop="`data.${index}.score`" :rules="{required: true, message: `请输入获得分数`, trigger: ['blur']}"
                        label="获得分数："
          >
            <el-input v-model="item.score"></el-input>
          </el-form-item>
          <el-form-item v-if="index === 0" :prop="`data.${index}.target_val`"
                        :rules="{required: true, message: `请输入每周新增动态条数`, trigger: ['blur']}"
                        label="每周新增动态条数："
          >
            <el-input v-model="item.target_val" placeholder="请输入内容">
              <template slot="append">条</template>
            </el-input>
          </el-form-item>
          <el-form-item v-else :prop="`data.${index}.target_val`"
                        :rules="{required: true, message: `请输入每周在线时长`, trigger: ['blur']}"
                        label="每周在线时长："
          >
            <el-input v-model="item.target_val" placeholder="请输入内容">
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="submitEdit(formData3.data)">确定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import { getAllInfo, rcadd, rcdel, rcedit } from '@/api/anchorManagement/anchorRating'

export default {
  name: 'anchorRating',
  data() {
    return {
      anchorLevelVisible: false,
      allData: {
        anchor_level: [],
        total_flow: [],
        conversion_rate: [],
        chat_new_people: [],
        operational_task: []
      },
      dialogTitle: '添加总流水任务',
      dialogVisible: false,
      dialogVisible2: false,
      addOreditData: [{ //编辑或新增总流水弹窗form值
        runoff: '',
        active: '',
        number: ''
      }],
      formData: {
        anchor_level: []
      },
      formData2: {
        data: []
      },
      rules2: {
        // sort: [
        //     { required: true, trigger: 'blur', validator: validatePassword }
        // ],
        // password: [
        //     { required: true, trigger: 'blur', validator: validatePassword }
        // ],
        // password: [
        //     { required: true, trigger: 'blur', validator: validatePassword }
        // ],
        // password: [
        //     { required: true, trigger: 'blur', validator: validatePassword }
        // ],
      },
      formData3: {
        data: []
      },
      showdialog: 1,
      rules: {},
      isAdd: false,
      chat_new_people: [],
      conversion_rate: [],
      total_flow: []
    }
  },
  created() {
    // setToken('eyJpZCI6MSwibmlja25hbWUiOiJcdTc1MjhcdTYyMzcxIiwiYXZhdGFyIjoiIn0=')
  },
  mounted() {
    this.getAllInfo()
  },
  methods: {
    handleDelete(row, index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // rows.splice(index, 1);
        rcdel({
          id: row.id
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getAllInfo()
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closeDialog() {
      this.formData2 = {
        data: []
      }
      this.formData = {
        anchor_level: []
      }
      this.formData3 = {
        data: []
      }
    },
    handleEdit(data) {
      this.addOreditData = data
      this.anchorLevelVisible = true
      this.formData.anchor_level = JSON.parse(JSON.stringify(data))
    },
    handleEdit1(data, title, type) {
      this.isAdd = false
      this.dialogTitle = title
      this.dialogVisible = true
      this.formData2.data = JSON.parse(JSON.stringify(data))
      // this.formData2 = this.$set(this.formData2, 'data', data)
      if (type === 'total_flow') {
        this.showdialog = 1
      }
      if (type === 'conversion_rate') {
        this.showdialog = 2
      }
      if (type === 'chat_new_people') {
        this.showdialog = 3
      }
    },
    handleEdit2(data) {
      console.log(data)
      this.dialogVisible2 = true
      this.formData3.data = JSON.parse(JSON.stringify(data))
    },
    submitEdit(data) {
      let isNull = [true]
      isNull = data.map((item, index) => {
        if (!item.sort || !item.score || !item.target_val) {
          this.$message({
            type: 'warning',
            message: '不能为空,请输入内容后再提交'
          })
          return false
        } else {
          return true
        }
      })
      console.log(this.isAdd, !isNull.includes(false), isNull)
      if (!isNull.includes(false)) {
        if (this.isAdd) {
          rcadd({
            type: data[0].type,
            score: data[0].score,
            target_val: data[0].target_val,
            sort: data[0].sort
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.anchorLevelVisible = false
              this.dialogVisible = false
              this.dialogVisible2 = false
              this.isAdd = false
              this.getAllInfo()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        } else {
          rcedit({
            data: data,
            type: data[0].type
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.anchorLevelVisible = false
              this.dialogVisible = false
              this.dialogVisible2 = false
              this.isAdd = false
              this.getAllInfo()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      }
    },
    getAllInfo() {
      getAllInfo().then(res => {
        this.chat_new_people = []
        this.conversion_rate = []
        this.total_flow = []
        if (res.code === 200) {
          this.allData = res.data
          res.data.chat_new_people.map(item => {
            this.chat_new_people.push(item.sort)
          })
          res.data.conversion_rate.map(item => {
            this.conversion_rate.push(item.sort)
          })
          res.data.total_flow.map(item => {
            this.total_flow.push(item.sort)
          })
        }
      })
    },
    handleAdd(data, type, title) {
      this.isAdd = true
      this.dialogTitle = title
      this.dialogVisible = true
      if (type === 'total_flow') {
        this.showdialog = 1
      }
      if (type === 'conversion_rate') {
        this.showdialog = 2
      }
      if (type === 'chat_new_people') {
        this.showdialog = 3
      }
      this.formData2.data.push({
        score: '',
        sort: '',
        target_val: '',
        type: data[0].type
      })
    },
    handleBlur(val, type) {
      if (type === 1) {
        if (this.total_flow.includes(Number(val))) {
          this.$message({
            type: 'warning',
            message: '排序已存在,请重新输入'
          })
          val = ''
        }
      }
      if (type === 2) {
        if (this.conversion_rate.includes(Number(val))) {
          this.$message({
            type: 'warning',
            message: '排序已存在,请重新输入'
          })
          val = ''
        }
      }
      if (type === 3) {
        if (this.chat_new_people.includes(Number(val))) {
          this.$message({
            type: 'warning',
            message: '排序已存在,请重新输入'
          })
          val = ''
        }
      }
    }
  }

}
</script>

<style lang="scss">
.box {
  padding    : 15px;
  box-sizing : border-box;

  .line {
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
  }

  .line:last-child {
    border : none;
  }

  .color-red {
    color : red;
  }

  .red {
    color : red;
  }

  .bg-00000020 {
    background : rgba(0, 0, 0, 0.2);
  }

  .flex {
    display : flex;
  }

  .items-center {
    align-items : center;
  }

  .items-start {
    align-items : flex-start;
  }

  .just-center {
    justify-content : flex-start;
  }

  .flex-column {
    flex-direction : column;
  }

  .width-100 {
    width         : 100%;
    border        : 1px solid #999;
    margin-bottom : 15px;
    padding       : 15px;
    border-radius : 8px;
  }

  .w-120 {
    width : 120px;
  }

  .w-250 {
    width : 250px;
  }

  .h-100 {
    height : 100px;
  }

  .ml-15 {
    margin-left : 15px;
  }

  .pl-20 {
    padding-left : 20px;
  }

  .mb-20 {
    margin-bottom : 20px;
  }

  .ml-10 {
    margin-left : 10px;
  }
}

</style>
